<template>
  <div>
    <!--叶子级菜单-->
    <template v-if="item.data && item.data.length === 0">
      <el-menu-item  :index="item.path">
        {{item.name}}
      </el-menu-item>
    </template>
    <!--父级菜单-->
    <el-submenu v-else :index="item.path" style="text-align: left">
      <span slot="title" style="font-size: 17px;">
        <i :class="item.iconCls"></i>
        {{item.name}}
      </span>
      <template v-for="child in item.data">
        <children-menu v-if="child.data && child.data.length>0" :item="child"/>
        <el-menu-item v-else  :index="child.path">
          <i :class="child.icon"></i>
          {{child.name}}
        </el-menu-item>
      </template>
    </el-submenu>
  </div>
</template>
  <script>
 
    export default {
    
    name: 'ChildrenMenu',
     props: {
      item: {
        type: Object,
        required: true
      }
    },
    data () {
      return {}
        }
    }
  </script>
